<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <script src="lib/vue.min.js"></script> -->
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="root">
        <h1>{{name}}</h1>
        <p>
            {{ greet("Night") }}
        </p>
        <!-- v-bind用于传递<标签>元素的数据 -->
        <input type="text" v-bind:value="var_text">
        <p v-html="tag_block"></p>
    </div>

    <script>
        new Vue({
            el: "#root",  // 根容器
            data: {
                name: "Mr.Li",
                var_text: "可变文本",
                tag_block: "<a href='http://www.baidu.com'>访问百度</a>",
            },
            methods: {
                greet: function(time){
                    return "Good " + time + ", " + this.name + "~"
                }
            }
        })
    </script>
</body>
</html>